<template>
  <div>
    <el-form ref="form" :model="teacher" label-width="80px">
      <el-form-item label="讲师姓名">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" :min="1" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" placeholder="讲师头衔">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="特级讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"></el-input>
      </el-form-item>
      <el-form-item label="讲师介绍">
        <el-input type="textarea" v-model="teacher.intro"></el-input>
      </el-form-item>

      <!--讲师头像 TODO-->
      <el-form-item label="讲师头像">
        <!--头像缩略图-->
        <pan-thumb :image="teacher.avatar"/>
        <!--文件上传按钮-->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
        <!--上传组件-->
        <image-cropper v-show="imagecropperShow" :width="300" :height="300" @crop-upload-success="cropSuccess"
                       :key="imagecropperKey" :url="BASE_API + '/oss/file/upload'" field="file" @close="close"/>

      </el-form-item>

      <el-form-item>
        <el-button :disabled="buttonUseful" type="primary" @click="saveOrUpdate">保存</el-button>
        <el-button @click="clean">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  /**
   * 遇到的问题
   * 1.点击修改时，先进性数据的回显，但是再次点击添加数据时，会发现表单的数据没有清空
   * 解决：我们可以采取监听的方法或者使用mounted解决
   *
   * 2.图片上传的问题
   *  不要忘记导入组件以及注册组件
   *  2.1当头像上传头像成功后不能再次继续上传
   *    更改组件的唯一key
   *
   */
  import teacherApi from '@/api/edu/teacher'
  import PanThumb from '@/components/PanThumb/index'
  import ImageCropper from '@/components/ImageCropper/index'

  export default {
    name: 'save',
    components: { PanThumb , ImageCropper},
    data() {
      return {
        teacher: {
          sort: 1,
          avatar: ''
        },
        //是否开启按钮禁用
        buttonUseful: false,
        //上传弹框是否显示
        imagecropperShow: false,
        imagecropperKey: 0,

        //获取基础请求路径
        BASE_API: process.env.BASE_API,

      }
    },

/*    mounted() {
      if (this.$route.params && this.$route.params.id) {
        this.getInfo(this.$route.params.id)
      }else {
        this.teacher = {sort: 1,avatar: ''}
      }
    },*/



    created() {
      this.init();
    },

    watch: {
      $route(to,from){
        this.init();
      }
    },

    methods: {
      //判断是增加还是修改信息
      init(){
        if (this.$route.params && this.$route.params.id){
          this.getInfo(this.$route.params.id);
        }else {
          this.teacher = {sort: 1,avatar: ''}
        }
      },

      //修改或添加讲师信息
      saveOrUpdate() {
        //判断是修改还是添加
       if (this.teacher.id){
         //存在id，则是修改
         this.updateTeacherInfo();
       }else {
         this.addTeacher();
       }
      },

      addTeacher() {
        teacherApi.addTeacher(this.teacher).then(response => {
          this.$message.success('添加成功')
          //添加用户成功，进行路由跳转到列表页面
          this.$router.push('/teacher/table')
        })
      },

      //查询回显表单数据
      getInfo(id) {
        teacherApi.getTeacherInfo(id).then(response => {
          console.log(response)
          this.teacher = response.data.data
        })
      },

      //修改讲师的方法
      updateTeacherInfo() {
        teacherApi.editTeacher(this.teacher).then(response => {
          this.$message.success('修改成功')
          this.$router.push('/teacher/table')
        })
      },

      //点击清空按钮清空表单
      clean(){
        this.teacher = {sort: 1}
      },

      //关闭上传弹框的方法
      close(){
          this.imagecropperShow = false;
          this.imagecropperKey = this.imagecropperKey + 1;
      },

      //头像上传成功的方法
      cropSuccess(data){
        //上传成功后返回图片的地址，然后赋值给teacher.avatar，并且也需要关闭弹框
        this.teacher.avatar = data.url;
        this.imagecropperShow = false;
        //防止出现只能上传一次的情况，需要每次变化Key
        this.imagecropperKey = this.imagecropperKey + 1;
      }
    }
  }
</script>

<style scoped>

</style>
